<template>
	<h4 class="title_lv2"></h4>
	<div class="show_link">
		<a href="https://element-plus.org/zh-CN/component/slider.html" target="_blank">https://element-plus.org/zh-CN/component/slider.html</a>
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">基础用法</span>
		<el-slider v-model="value1" />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">离散值 -改变step的值可以改变步长， 通过设置 show-stops 属性可以显示间断点</span>
		<el-slider v-model="value2" :step="10" show-stops />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">带有输入框的滑块-设置 show-input 属性会在右侧显示一个输入框</span>
		<el-slider v-model="value3" show-input />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">位置-您可以自定义 Tooltip 提示的位置。</span>
		<el-slider v-model="value4" placement="bottom" />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">范围选择-配置 range 属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成。</span>
		<el-slider v-model="value5" range show-stops :max="10" />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">垂直模式</span>
		<el-slider v-model="value6"  vertical height="200px" />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">显示标记-设置 marks 属性可以在滑块上显示标记。</span>
		<el-slider v-model="value7" range :marks="marks" />
	</div>
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
		<pre><code class="language-js">{{ htmlCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->

</template>

<script lang="ts" setup>
	import { reactive,ref, onMounted, nextTick } from "vue";
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";
	import type { CSSProperties } from 'vue'

	const value1 = ref(0)
	const value2 = ref(0)
	const value3 = ref(0)
	const value4 = ref(0)
	const value5 = ref([4,8])
	const value6 = ref(0)
	const value7 = ref([30, 60])
	interface Mark {
	  style: CSSProperties
	  label: string
	}
	type Marks = Record<number, Mark | string>
	
	
	const marks = reactive<Marks>({
	  0: '0°C',
	  8: '8°C',
	  37: '37°C',
	  50: {
	    style: {
	      color: '#1989FA',
	    },
	    label: '50%',
	  },
	})
	let htmlCode = ref<string>(`
		<div class="slider-demo-block">
			<span class="demonstration">基础用法</span>
			<el-slider v-model="value1" />
		</div>
		<div class="slider-demo-block">
			<span class="demonstration">离散值 -改变step的值可以改变步长， 通过设置 show-stops 属性可以显示间断点</span>
			<el-slider v-model="value2" :step="10" show-stops />
		</div>
		<div class="slider-demo-block">
			<span class="demonstration">带有输入框的滑块-设置 show-input 属性会在右侧显示一个输入框</span>
			<el-slider v-model="value3" show-input />
		</div>
		<div class="slider-demo-block">
			<span class="demonstration">位置-您可以自定义 Tooltip 提示的位置。</span>
			<el-slider v-model="value4" placement="bottom" />
		</div>
		<div class="slider-demo-block">
			<span class="demonstration">范围选择-配置 range 属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成。</span>
			<el-slider v-model="value5" range show-stops :max="10" />
		</div>
		<div class="slider-demo-block">
			<span class="demonstration">垂直模式</span>
			<el-slider v-model="value6"  vertical height="200px" />
		</div>
		<div class="slider-demo-block">
			<span class="demonstration">显示标记-设置 marks 属性可以在滑块上显示标记。</span>
			<el-slider v-model="value7" range :marks="marks" />
		</div>
	`);

	/*
	生命周期
	*/
	onMounted(() => {
		nextTick(() => {
			Prism.highlightAll();
		});
	});
</script>
<style scoped>
	.slider-demo-block {
		width: 80%;
	}

	.slider-demo-block .el-slider {
		margin-top: 0;
		margin-left: 12px;
	}

	.slider-demo-block .demonstration {
		font-size: 14px;
		color: var(--el-text-color-secondary);
		line-height: 44px;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 0;
	}

	.slider-demo-block .demonstration+.el-slider {
		flex: 0 0 70%;
	}
</style>